<template>
  <div class="main">
    <div class="left">
      <!-- <el-input placeholder="请输入要查询的成员名称" v-model="filterText"></el-input> -->
      <!-- <el-input v-model="keyWord"
                :clear-icon-click="handleSearch"
                :on-icon-click="handleSearch"
                placeholder="请输入要查询的成员名称"
                suffix-icon="h-icon-search"
                clearable
                @keyup.enter.native="handleSearch"
      >
      </el-input> -->
        <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{node, data}">
            <span>{{ node.label }}</span>
            <span>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-circle-plus-outline"
                @click="append(data)">
              </el-button>
              <el-button
                type="text"
                size="mini"
                v-if="node.label!=='公司部门'"
                icon="el-icon-remove-outline"
                @click="remove(node, data)">
              </el-button>
              <el-button
                type="text"
                size="mini"
                v-if="node.label!=='公司部门'"
                icon="el-icon-edit-outline"
                @click="checkMemberDialog(node, data)">
              </el-button>
            </span>
          </span>
        </el-tree>
    </div>
    <div class="right">
      <el-table>
        <el-table-column label="ID" type="index" width="50" align="center">
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="邮箱" align="center" prop="email" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="部门" align="center" prop="department" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="职位" align="center" prop="position" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="性别" align="center" prop="sex" :show-overflow-tooltip="true" width="60"/>
        <el-table-column label="状态" align="center" prop="state" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="账号状态" align="center" prop="idState" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="入职时间" align="center" prop="createTime" width="100" />
        <el-table-column label="离职时间" align="center" prop="updateTime" width="100" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-remove-outline"></el-button>
            <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="checkMemberDialog"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"/> -->
    </div>

    <!--编辑部门信息弹窗 start-->
    <el-dialog 
      title="编辑部门信息" 
      :visible.sync="dialogVisible1" 
      :before-close="handleClose1" 
    >
      <el-form
        class="d-ruleForm1"
        :model="ruleForm1"
        :rules="rules1"
        ref="ruleForm1"
        label-width="130px"
        size="mini"
      >
        <el-form-item label="部门名" prop="dName">
          <el-input v-model="ruleForm1.dName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose1">取 消</el-button>
        <el-button type="primary" @click="confirmClick1('ruleForm1')">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑部门信息弹窗 end-->

    <!--编辑成员信息弹窗 start-->
    <el-dialog 
      title="编辑成员信息" 
      :visible.sync="dialogVisible" 
      :before-close="handleClose" 
    >
      <el-form
        class="d-ruleForm"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="130px"
        size="mini"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-select v-model="ruleForm.department" placeholder="请选择部门">
            <el-option label="部门1" value="A"></el-option>
            <el-option label="部门2" value="B"></el-option>
            <el-option label="部门3" value="C"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-select v-model="ruleForm.position" placeholder="请选择职位">
            <el-option label="经理" value="A"></el-option>
            <el-option label="开发人员" value="B"></el-option>
            <el-option label="测试人员" value="C"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex" placeholder="请选择性别">
            <el-option label="男" value="A"></el-option>
            <el-option label="女" value="B"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="ruleForm.state" placeholder="请选择状态">
            <el-option label="在职" value="A"></el-option>
            <el-option label="离职" value="B"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="账号状态" prop="idState">
          <el-select v-model="ruleForm.idState" placeholder="请选择账号状态">
            <el-option label="正常" value="A"></el-option>
            <el-option label="注销" value="B"></el-option>
            <el-option label="冻结" value="C"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" prop="createTime">
          <el-date-picker v-model="ruleForm.createTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="离职时间" prop="updateTime">
          <el-date-picker v-model="ruleForm.updateTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmClick('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑成员信息弹窗 end-->

    <!-- 分页 -->
    <div class="block">
      <span class="demonstration">页数</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
    </div>
  </div>
</template>

<script>
let id = 103;
let id1 = 206;
export default {
    data() {
      const data = [{
        // filterText:'',
        id: 1,
        label: '公司部门',
        children: [{
          id: 2,
          label: '部门101',
          children: [{
            id: 5,
            label: '子部门201'
          }, {
            id: 6,
            label: '子部门202'
          }]
        },{
          id: 3,
          label: '部门102',
          children: [{
            id: 7,
            label: '子部门203'
          }, {
            id: 8,
            label: '子部门204'
          }]
        },{
          id: 4,
          label: '部门103',
          children: [{
            id: 9,
            label: '子部门205'
          }, {
            id: 10,
            label: '子部门206'
          }]
        }]
      }];
      return{
        value1: '',
        dialogVisible1: false, //编辑部门信息弹窗
        //部门信息表单数据
        ruleForm1:{
          dName:"",
        },
        //部门信息表单校验规则
        rules1:{

        },
        dialogVisible: false, //编辑成员信息弹窗
        //成员信息表单数据
        ruleForm:{
          name:"",
          email:"",
          department:"",
          position:"",
          sex:"",
          state:"",
          idState:"",
          createTime:"",
          updateTime:"",
        },
        //成员信息表单校验规则
        rules:{

        },
        data: JSON.parse(JSON.stringify(data)),
        currentPage4: 1,
      }
        // defaultProps: {
        //   label: 'label'
        // },
    },
    // watch:{
    //   filterText(val){
    //     this.$refs.tree.filter(val)
    //   }
    // },
    methods: {
      append(data) {
        console.log("d", data);
        if(data.label==='公司部门'){
          const newChild = { id: id++, label: '部门'+id, children: [] };
          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
        }
        else{
          const newChild = { id: id1++, label: '子部门'+id1, children: [] };
          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
        }
      },

      remove(node, data) {
        console.log("d", node);
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
      //打开编辑弹窗
      checkMemberDialog(){
        // console.log(node,data)
        // if(node.level===2){
          this.dialogVisible1 = true;
        // }else{
        //   this.dialogVisible = true;
        // }
      },
      //关闭部门信息表单
      handleClose1(){
        this.ruleForm1.dName = "";
        this.dialogVisible1 = false;
      },
      //检验 提交部门信息表单
      confirmClick1(){},
      //关闭成员信息表单
      handleClose(){
        this.ruleForm.name = "";
        this.ruleForm.email = "";
        this.ruleForm.department = "";
        this.ruleForm.position = "";
        this.ruleForm.sex = "";
        this.ruleForm.state = "";
        this.ruleForm.idState = "";
        this.ruleForm.createTime = "";
        this.ruleForm.updateTime = "";
        this.dialogVisible = false;
      },
      //检验 提交成员信息表单
      confirmClick(){},
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style scoped>
b{
  font-size: 1.5em;
}
.left{
  width: 20%;
  float: left;
}
.right{
  width: 80%;
  float: left;
}
.el-input__inner{
  height: 30px;
}
.t{
  height: 35px;
}
.i{
  float: right;
}
.el-tree-node {
  border-bottom: 1px solid rgb(103, 100, 100);
  height: 30px;
}
.el-button--text {
  color: #0f9eca;
}
.el-input{
  width: 200px;
}

.el-form-item{
  margin-bottom: 5px;
}
.el-dialog__body {
    padding: 0px 0px;
}
</style>